<template>
    <div class="flex">
        <div id="supportChart" style="height:214px;width:214px;" class="chart"></div>
        <div class="info">
            <div>配套人员紧缺</div>
            <div style="display:flex;padding:10px 0">
                <div v-for="(item, index) in numberList" :key="index" class="number">{{item}}</div>
            </div>
            <div style="opacity:0.72">人</div>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import 'echarts-liquidfill'
export default {
    props: {
        data: Object
    },
    data() {
        return {
            numberList: [],
            myChart: null
        }
    },
    watch: {
        data: {
            handler(oldV, newV) {
                this.numberList = (this.data.count + "").split("");
                setTimeout(() => {
                    this.showChart()
                }, 100);
            },
            immediate: true,
            deep: true
        }
    },
    methods: {
        showChart() {
            if (!this.myChart) {
                this.myChart = echarts.init(document.getElementById('supportChart'));
            } else {
                this.myChart.clear();
            }
            let option = {
                series: [
                    {
                        type: 'liquidFill', //水位图
                        radius: '80%', //显示比例
                        center: ['50%', '50%'], //中心点
                        amplitude: 20, //水波振幅
                        data: [0.5,.5,.5], // data个数代表波浪数
                        color: [
                            {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(6, 95, 184, 0)',
                                    },
                                    {
                                        offset: 1,
                                        color: '#65D2FF',
                                    },
                                ],
                                globalCoord: false,
                            },
                        ], //波浪颜色
                        backgroundStyle: {
                            borderWidth: 1, //外边框
                            color: 'transparent'
                            // color: '', //边框内部填充部分颜色
                        },
                        label: {
                            //标签设置
                            position: ['50%', '50%'],
                            formatter: `${this.data.percentage}%\n{label|服务饱和度}`, //显示文本,
                            textStyle: {
                                fontSize: '32px', //文本字号,
                                color: '#fff',
                            },
                            rich: {
                                label: {
                                    fontSize: 16,
                                    color: '#FFF',
                                    padding: [4, 0, 4,]
                                }
                            }
                        },
                        outline: {
                            show: true,
                            borderDistance: 0,
                            itemStyle: {
                                borderWidth: 0,
                                color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [{
                                    offset: 0, color: '#0b2355' // 0% 处的颜色
                                }, {
                                    offset: 1, color: '#195b9d' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                                }
                            }
                            }
                    },
                ],
            };
            this.myChart.setOption(option);
        }
    }
}
</script>
<style lang="less" scoped>
.flex {
    display: flex;
    box-sizing: border-box;
    height: 252px;
    align-items: center;
}
.info {
    width: 255px;
    height: 196px;
    background-image: url('../assets/support_decorate.png');
    background-size: 100% 100%;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.number {
    border-width: 1px;
    border-style: solid;
    border-color: red;
    font-family: DINPro-Medium;
    font-size: 20px;
    color: #64E6E2;
    letter-spacing: 1.2px;
    text-align: center;
    line-height: 28px;
    font-weight: 500;
    margin-right: 4px;
    width: 24px;
    height: 28px;
    border-image: linear-gradient(180deg, rgba(8,132,255,0.40) 0%, rgba(8,132,255,0.00) 51%, rgba(8,132,255,0.72) 100%) 1;
}
.chart {
    position: relative;
    &::before {
        content: " ";
        width: 100%;
        height: 100%;
        position: absolute;
        background-image: url('../assets/circle_bg.svg');
        background-size: 100% auto;
        left: 0;
        top: 0;
        background-repeat: no-repeat;
    }
}
</style>